<template>
    <div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible" width="70%" @open='openDialog' @close='closeDialog'>
            <el-form :model="form" :rules="rules" ref="ruleForm">
                <el-form-item label="用户名称" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                    <el-input v-model="form.email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="地址" :label-width="formLabelWidth" prop="address">
                    <region-selects :town="true" @change="regionChange" />
                    <el-input style="margin-top:20px;" type="text" v-model="detail_address" placeholder="请输入详细地址" @change="addressinput">
                    </el-input>
                    <span>{{address_pinjie}}</span>
                </el-form-item>
                <el-form-item label="出生日期" :label-width="formLabelWidth" prop="birth">
                    <el-date-picker v-model="form.birth" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="CancelSub">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { RegionSelects } from 'v-region'

export default {
    components: {
        RegionSelects

    },
    data() {
        return {
            code: 0,//0表示直接添加是插入信息；1表示从编辑页面过来，是修改信息
            fileList: [],
            category_sel: "",
            innerVisible: false,
            innerVisibleImg: false,
            dialogFormVisible: false,
            detail_address: '',
            isSubmit: false,
            province:'',
            city:'',
            area:'',
            town:'',
            form: {
                id: '',
                username: "",
                phone: "",
                email: "",
                address: '',
                birth: '',
                create_time: "",
                editor_time: "",
                delivery: false,
                type: [],
                resource: "",
                desc: ""
            },
            rules: {
                username: [
                    { required: true, message: "请输入商品名称", trigger: "blur" },
                    {
                        min: 2,
                        max: 10,
                        message: "长度在 2 到 10 个字符",
                        trigger: "blur",
                    },
                ],
                phone: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
                email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
            },

            formLabelWidth: "120px"
        };
    },
    computed: {
        address_pinjie: function () {
            return this.form.address+this.detail_address
        }
    },
    methods: {
        CancelSub() {
            this.dialogFormVisible = false;
            this.ClearContent();
        },
        openDialog() {
            console.log("打开dialog");
            let data = JSON.parse(localStorage.getItem('usersMessage'));
            console.log(data)
            if (data) {
                this.code = 1;
                this.form.id = data.id;
                this.isSubmit = true;
                this.form.username = data.username;
                this.form.phone = data.phone;
                this.form.email = data.email;
                this.form.address = data.address;
                this.form.birth = data.birth;
            } else {
                console.log("正常添加用户！")
            }

        },
        closeDialog() {
            this.ClearContent();
            localStorage.removeItem('usersMessage');
            //this.reload()
        },
        ClearContent() {
            this.$refs.ruleForm.clearValidate();
            this.form.username = "";
            this.form.phone = "";
            this.form.email = "";
            this.form.address = "";
            this.form.birth = "";
            this.form.delivery = false;
            this.form.type = [];
        },
        submitForm() {
            this.form.address=this.address_pinjie
            this.$refs.ruleForm.validate((result) => {
                if (this.code == 0) {
                    if (result) {
                        this.dialogFormVisible = false;
                        this.$ajax({
                            method: "post",
                            url: "/api/users_submit",
                            params: this.form
                        }).then(res => {
                            console.log(res)
                            this.$message({
                                message: '用户添加成功！',
                                type: 'success'
                            });
                            this.ClearContent()
                            this.reload()
                        });
                    } else {
                        this.$message({
                            message: '用户添加失败，请检查所填写内容！',
                            type: 'error'
                        });
                    }
                } else {
                    if (result) {
                        this.dialogFormVisible = false;
                        console.log('form:', this.form)
                        this.$ajax({
                            method: "post",
                            url: "/api/users_editor",
                            params: this.form
                        }).then(res => {
                            this.code = 0;
                            console.log(res)
                            this.$message({
                                message: '修改用户信息成功！',
                                type: 'success'
                            });
                            this.ClearContent()
                            this.reload()
                        });
                    } else {
                        this.$message({
                            message: '修改用户信息失败，请检查所修改内容！',
                            type: 'error'
                        });
                    }
                }
            });
        },
        regionChange(data) {
            console.log(data)
            if(data.province){
                this.province=data.province.value
            }
            if(data.city){
                this.city=data.city.value
            }
            if(data.area){
                this.area=data.area.value
            }
            if(data.town){
                this.town=data.town.value
            }
            this.form.address = this.province + this.city + this.area + this.town
        },
        addressinput(){
            if(!this.province&&!this.city&&!this.area&&!this.town){
                this.detail_address=''
            }
        }

    },
    inject: ['reload']
}
</script>

<style lang="less" scoped>
.line {
    text-align: center;
}
</style>